<template>
  <div>
    <el-dialog title="流程历史"
               :visible.sync="visible"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               append-to-body
               :before-close="close"
               width="1300px">
      <el-tabs tab-position="top"
               type="card"
               v-loading="loading"
               v-model="tabelName"
               @tab-click="handleClick">
        <el-tab-pane v-for="item in data"
                     :key="item.id"
                     :label="`${item.instanceNo}`">
        </el-tab-pane>
      </el-tabs>
      <simpleFlow ref="simpleFlow1"
                  :nodeList="nodeList"
                  :lineList="lineList"
                  :instanceId="flowInfo.id"
                  :tempId="flowInfo.tempId"
                  :orgId="flowInfo.orgId"
                  :isCompleted="flowInfo.isCompleted === 1"
                  :status="JSON.parse(flowInfo.statusGroup)"
                  :approvalData="[]"
                  :busiOption="[]"></simpleFlow>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="close">{{$t('cancelText')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTaskHistory } from '../../api/processManagement'
import { getInstanceNow } from '../../api/processManagement/flowInstance'
import simpleFlow from '../processDrag/simpleFlow'


export default {
  props: {
    tableName: String,
    objectId: Number
  },
  components: { simpleFlow },
  data () {
    return {
      visible: false,
      data: [],
      loading: true,
      tabelName: '',
      nodeList: [],
      lineList: [],
      flowInfo: {}
    }
  },
  watch: {
    visible: {
      handler: 'getList'
    }
  },
  methods: {
    getList () {
      this.loading = true
      if (!this.visible) return
      const obj = {
        tableName: this.tableName,
        objectId: this.objectId
      }
      getTaskHistory(obj).then(res => {
        this.data = res.data.data
        this.flowInfo = res.data.data[0]
        this.getInfo()
        this.loading = false
      })
    },
    getInfo () {
      if (!this.flowInfo || !this.flowInfo.id) {
        this.$message.warning('无历史流程信息')
        return
      }
      if (this.$refs.simpleFlow1)
        this.$refs.simpleFlow1.loading = true
      getInstanceNow(this.flowInfo.id).then(res => {
        this.loading = false
        if (res.data.data) {
          this.$refs.simpleFlow1.loadNodeData = false
          this.$refs.simpleFlow1.approval = {
            opinion: [],
            basicTable: []
          }
          this.lineList = res.data.data.lines
          this.nodeList = res.data.data.nodes.map((res, index) => {
            res.leftCoord = 20 + 200 * index
            if (res.nodeName === '开始' || res.nodeName === '结束') res.topCoord = 115
            else res.topCoord = 120
            return res
          })
        }
      })
    },
    sizeChange (val) {
      this.page.currentPage = 1
      this.page.pageSize = val
      this.getList()
    },
    currentChange (val) {
      this.page.currentPage = val
      this.getList()
    },
    close () {
      this.visible = false
    },
    handleClick (tab) {
      this.flowInfo = this.data.filter(res => { return res.instanceNo === tab.label })[0]
      this.getInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-tabs__header {
  margin: 0;
}
</style>